<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">
      下级代理佣金设置
    </template>
    <div>
      <p style="color:red;font-size:12px">
        注1：当二/三级下级代理佣金配置=0时，则下级代理佣金按照各自的计算，本级和二/三级的差值向上以下级代理佣金的方式返给本级代理 <br/>
        注2：若设置了注1的条件，则设置二/三级“返佣设置”时“返佣比例”必须小于本级代理的“返佣比例”
      </p>
    </div>
    <el-form :model="form" ref="refForm" :rules="rules" label-position="left" inline class="demo-table-expand">
      <el-card style="margin-bottom: 20px;">
        <div slot="header">
          二级代理
          <el-button style="float: right;padding: 3px 0" type="text" @click="addStratified('subList')">添加</el-button>
        </div>

        <el-table border :data="form.subList">
          <el-table-column label="情况" align="center">
            <template slot-scope="{row}">二级代理>=</template>
          </el-table-column>
          <!--<el-table-column prop="commissionLimit" label="最大返佣额（0为不限)" align="center">-->
          <!--<template slot-scope="{row,$index}">-->
          <!--<el-form-item :prop="'subList.' + $index + '.commissionLimit'" :rules="rules.commissionLimit">-->
          <!--<el-input class="edit-input" size="small" v-model="row.commissionLimit"></el-input>-->
          <!--</el-form-item>-->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column prop="userCount" label="有效代理数" align="center">
            <template slot-scope="{row,$index}">
              <template>
                <el-form-item :prop="'subList.' + $index + '.proxyCount'">
                  <el-input class="edit-input" size="small" v-model.number="row.proxyCount" type="number" min="1" @keyup.enter.native="addStratified('secondSubList')">
                  </el-input>
                  <span v-if="row.proxyCount<1" style="color:red;" >有效代理数必须>=1</span>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="commission" label="返佣比例（%）" align="center">
            <template slot-scope="{row,$index}">
              <template>
                <el-form-item :prop="'subList.' + $index + '.commission'" :rules="rules.commission">
                  <el-input class="edit-input" size="small" v-model.number="row.commission" @keyup.enter.native="addStratified('secondSubList')"></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="情况" align="center">
            <template slot-scope="{row}">不满足则下一步</template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="{row,$index}">
              <el-button type="text" @click="delStratified('subList',$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <div slot="header">
          三级代理
          <el-button style="float: right;padding: 3px 0" type="text" @click="addStratified('secondSubList')">添加
          </el-button>
        </div>

        <el-table border :data="form.secondSubList">
          <el-table-column label="情况" align="center">
            <template slot-scope="{row}">三级代理>=</template>
          </el-table-column>
          <!--<el-table-column prop="commissionLimit" label="最大返佣额（0为不限)" align="center">-->
          <!--<template slot-scope="{row,$index}">-->
          <!--<el-form-item :prop="'secondSubList.' + $index + '.commissionLimit'" :rules="rules.commissionLimit">-->
          <!--<el-input class="edit-input" size="small" v-model="row.commissionLimit"></el-input>-->
          <!--</el-form-item>-->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column prop="userCount" label="有效代理数" align="center">
            <template slot-scope="{row,$index}">
              <template>
                <!-- <el-form-item :prop="'secondSubList.' + $index + '.proxyCount'" :rules="rules.userCount"> -->
                <el-form-item :prop="'secondSubList.' + $index + '.proxyCount'">
                  <el-input class="edit-input" size="small" v-model="row.proxyCount" type="number" min="1" @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})"></el-input>
                  <span v-if="row.proxyCount<1" style="color:red;" >有效代理数必须>=1</span>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="commission" label="返佣比例（%）" align="center">
            <template slot-scope="{row,$index}">
              <template>
                <el-form-item :prop="'secondSubList.' + $index + '.commission'" :rules="rules.commission">
                  <el-input class="edit-input" size="small" v-model.number="row.commission" @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})"></el-input>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="情况" align="center">
            <template slot-scope="{row}">不满足则下一步</template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="{$index}">
              <el-button type="text" @click="delStratified('secondSubList',$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'refForm'})">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import {form, factory} from '@/build'
  import {
    getProxyCommissionDetail,
    updateSubCommissionConfigs,
  } from '@/services/api/commission';
  import ElTip from "@/components/Tip/index";

  export default {
    name: "sub-agency-configs-dialog",
    components: {ElTip},
    props: ['value', 'id'],
    mixins: [form, factory],
    data() {
      return {
        formLabelWidth: '180px',
        keywords: '',
        form: {
          id: this.id,
          subList: [],
          secondSubList: []
        },
        rules: {
          commissionLimit: [{
            validator: factory.getValidator('nonNegativeInteger', {required: false}),
            trigger: 'blur'
          }],
          userCount: [{validator: factory.getValidator('nonNegativeInteger')}],
          commission: factory.getRule('percent1000'),
        },
      }
    },

    mounted() {
      if (!_.isUndefined(this.id)) {
        this.bindGet(getProxyCommissionDetail, 'form', {
          sendingData: {id: this.id},
          format: data => {
            if (!data) {
              return this.form
            }
            let subList = data.subList ? data.subList : []
            let secondSubList = data.secondSubList ? data.secondSubList : []
            return {...this.form, subList, secondSubList}
          }
        })
        this.getAll()
      }
      this.bindSave(updateSubCommissionConfigs, 'saveForm', 'form', {
        afterSuccess: () => {
          this.cancel()
          this.$parent.getAll()
        }
      });
    },
    methods: {
      cancel() {
        this.$emit('input', false);
      },
      addStratified(position) {
        this.form[position].push({
          commissionLimit: 0,
          proxyCount: 0,
          commission: 0,
        })
      },
      delStratified(position, index) {
        this.form[position].splice(index, 1);
      }
    },

  }
</script>

<style lang="scss" scoped>

</style>
